<template>
	<view class="page">
		<view class="content">
			<view class="map-box" v-if="type=='order'">
				<view class="position">
					<image src="https://pw.qyang.cc/static/svg/dingwei.svg"></image>
					<view class="address">
						{{location.address}}
					</view>
					<view class="distance">相距{{location.distance}}km</view>
				</view>
				<map class="map" id="map1" ref="map1" :longitude="location.longitude" :latitude="location.latitude"
					:scale="18" :markers="markers"></map>
			</view>
			<view class="tips-box" v-if="type=='kefu'">
				<text>我们将竭诚为您服务</text>
				<view>
					<u-icon name="more-dot-fill" size="56rpx" color="#3D3D3D" @click="showPicker = true"></u-icon>
				</view>
			</view>
			<view class="messageList">
				<scroll-view class="scroll-view" :scroll-y="true" :scroll-into-view="lastId">
					<view v-for="(item, index) in messageList" :key="index" :id="'view'+item.ID">
						<view class="time" v-if="showTime(item.time, index > 0 ? messageList[index - 1].time : 0)">
							{{ getTimestamp(item, index) }}
						</view>
						<view class="message" :class="item.flow === 'in' ? 'message-in' : 'message-out'">
							<view class="message-left">
								<image :src="item.avatar ? item.avatar : 'https://pw.qyang.cc/static/avator.png'"
									class="avatar" mode="aspectFill"></image>
							</view>
							<view class="right_con">
								<text class="nick">{{item.nick}}</text>
								<view class="message-right">
									<view class="message-content" v-if="item.type == 'TIMTextElem'">
										<rich-text :nodes="item.payload.text"></rich-text>
										<!-- <div style='display:flex;align-item:center;line-height'>123123<img style="width:30px;height:30px;display:block" src="https://web.sdk.qcloud.com/im/assets/emoji-plugin/emoji_2@2x.png"/></div> -->
									</view>
									<image
										:style="{height: item.payload.imageInfoArray[1].height*2+'rpx',width: item.payload.imageInfoArray[1].width*2+'rpx'}"
										:src="item.payload.imageInfoArray[1].imageUrl" mode="widthFix"
										v-else-if="item.type == 'TIMImageElem'"
										@click="onPreviewImg(item.payload.imageInfoArray[1].imageUrl)"></image>
									<view class="video" v-else-if="item.type == 'TIMVideoFileElem'">
										<image
											:style="{height: item.payload.snapshotHeight+'rpx',width: item.payload.snapshotWidth+'rpx'}"
											:src="item.payload.snapshotUrl" mode="widthFix"
											@click="onPreviewVideo(item.payload.videoUrl)"></image>
										<image class="icon"
											src="">
										</image>
									</view>
									<view class="message_audio" v-else-if="item.type == 'TIMSoundElem'"
										@click="play(item,index)">
										<text>{{item.payload.second}}″</text>
										<view class="icon">
											<view class="mask" :class="item.playing?'play':''"></view>
											<image src="/subpages/static/images/msg-audio.svg"></image>
										</view>
									</view>
									<view class="read"
										v-if="item.flow === 'in'&&item.type == 'TIMSoundElem'&& audioPlayedMapping[item.ID]!==true">
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="input-box">
				<view class="audio">
					<image src="/subpages/static/images/audio.svg" mode="widthFix" style="width: 60rpx;height: 60rpx;"
						@click="isRecord = !isRecord">
					</image>
				</view>
				<view class="record" @touchstart="handleTouchStart" @longpress="handleLongPress"
					@touchmove="handleTouchMove" @touchend="handleTouchEnd" v-if="isRecord">
					{{touchBarText}}
				</view>
				<input id="editor" ref="inputRef" v-model="msgText" :adjust-position="true" cursor-spacing="20"
					confirm-type="send" :confirm-hold="true" maxlength="140" type="text"
					placeholder-class="input-placeholder" class="message-input-area" placeholder="请输入聊天消息" auto-blur
					@confirm="handleSendMessage" @input="onInput" @blur="onBlur" @focus="onFocus" v-else />
				<view class="emoji" @click="showEmoji">
					<image src="https://pw.qyang.cc/static/smile.png" mode="" style="width: 60rpx;height: 60rpx;">
					</image>
				</view>
				<view class="expend" @click="showExpend">
					<image src="https://pw.qyang.cc/static/add.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>
			<view class="expend_box" v-if="isExpend">
				<view class="expend_item" @click="sendMsgImage">
					<image src="/static/image.png" style="width: 64rpx;height: 50rpx;" mode="aspectFit"></image>
					图片
				</view>
				<view class="expend_item" @click="sendMsgVideo">
					<image src="/static/video.png" style="width: 64rpx;height: 40rpx;"></image>
					视频
				</view>
			</view>
			<view class="emoji_box" v-if="isEmoji">
				<emoji @sendEmoji="sendEmoji" :emojiList="emojiList"></emoji>
			</view>
		</view>
		<view v-if="isRecording" class="record-modal">
			<div class="red-mask" />
			<view class="float-element moving-slider" />
			<view class="float-element modal-title">
				{{ modalText }}
			</view>
		</view>
		<u-picker :show="showPicker" :columns="columns" keyName="label" :showToolbar="false" class="popup"
			closeOnClickOverlay :showDIYToolBar="true" @cancel="showPicker = false" @confirm="confirm">
		</u-picker>
	</view>
</template>

<script>
	import TencentCloudChat from '@tencentcloud/chat';
	import {
		formatTime
	} from '@/utils/util.js'
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	import emoji from './components/emoji.vue';
	import {
		DEFAULT_BASIC_EMOJI_URL,
		DEFAULT_BASIC_EMOJI_URL_MAPPING,
		zhEmoji
	} from './components/utils/emoji';
	export default {
		components: {
			emoji
		},
		data() {
			return {
				emojiList: [],
				location: {},
				markers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					width: 22,
					height: 22,
					iconPath: '/static/end.png'
				}, {
					id: 2,
					latitude: 0,
					longitude: 0,
					width: 22,
					height: 22,
					iconPath: '/static/start.png'
				}],
				conversationID: '',
				params: {
					conversationID: '',
					nextReqMessageID: ''
				},
				showPicker: false,
				columns: [
					[{
						id: 1,
						label: '客服很好，我很满意'
					}, {
						id: 2,
						label: '客服不行，我要更换'
					}]
				],
				messageList: [],
				isCompleted: false,
				currTime: 0,
				prevTime: 0,
				msgText: '',
				type: '',
				msgUserData: {},
				id: null,
				lastId: '',
				isExpend: false,
				isEmoji: false,
				isRecord: false,
				isRecording: false,
				touchBarText: '按住说话',
				modalText: '正在录音',
				recordTimer: null,
				recordTime: 0,
				firstTouchPageY: -1,
				isFingerTouchingScreen: false,
				isFirstAuthrizedRecord: false,
				isManualCancelBySlide: false,
				recordConfig: {
					duration: 60000,
					sampleRate: 44100,
					numberOfChannels: 1,
					encodeBitRate: 192000,
					format: 'mp3',
				},
				audioContext: null,
				isCanplay: false,
				isAudioPlaying: false,
				currentItem: null,
				currentIndex: null,
				audioPlayedMapping: {}
			}
		},
		watch: {
			messageList: {
				handler(n, o) {
					this.$nextTick(() => {
						if (n && n.length > 1) {
							setTimeout(() => {
								this.lastId = 'view' + this.messageList[this.messageList.length - 1].ID
								console.log(this.lastId)
							}, 500)
						}
					})
					this.lastId = ''
				},
				deep: true
			}
		},
		onLoad(options) {
			let _this = this
			if (options.type) {
				this.type = options.type
				if (this.type == 'order') {
					this.location.longitude = options.lng
					this.location.latitude = options.lat
					this.location.address = options.address
					this.markers[0].longitude = Number(options.lng)
					this.markers[0].latitude = Number(options.lat)
					// this.markers.push({
					// 	id:1,
					// 	latitude:Number(options.lat),
					// 	longitude:Number(options.lng),
					// 	iconPath:'/static/end.png'
					// })

					this.getLocation()
				}
			}
			this.id = options.conversationID ? options.conversationID.split('C2C')[1] : options.id
			this.conversationID = options.conversationID ? options.conversationID : 'C2C' + options.id
			//获取用户信息设置聊天标题
			getApp().globalData.chat.getUserProfile({
				userIDList: [this.id]
			}).then(res => {
				console.log(res)
				uni.setNavigationBarTitle({
					title: res.data[0].nick ? res.data[0].nick : '聊天'
				})
			}).catch(err => {
				console.log('获取用户信息失败', err)
			})
			getApp().globalData.chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, this.onMessageReceived);
			this.getConversation()

			recorderManager.onStart(() => {
				_this.startRecord()
			});
			recorderManager.onStop(res => {
				_this.endRecord(res)
			});
			recorderManager.onError(this.onRecorderError);
			this.getEmoji()
			this.audioPlayedMapping = uni.getStorageSync('TUI_CHAT_STORAGE') ? uni.getStorageSync('TUI_CHAT_STORAGE') : {}
		},
		methods: {
			//消息间隔时间
			showTime(time, prevTime) {
				return (time - prevTime) >= 10 * 60
			},
			//获取消息列表
			getConversation() {
				this.params.conversationID = this.conversationID
				getApp().globalData.chat.getMessageList(this.params).then(res => {
					// this.messageList = res.data.messageList
					this.params.nextReqMessageID = res.data.nextReqMessageID
					this.isCompleted = res.data.isCompleted

					res.data.messageList.map(item => {
						if (item.type == 'TIMTextElem') {
							Object.keys(zhEmoji).map(key => {
								if (item.payload.text.includes(zhEmoji[key])) {
									item.payload.text =
										`<div style='display:flex;align-item:center;height:28px;line-height:28px'>` +
										item.payload.text.replace(zhEmoji[key],
											`<img style="width:28px;height:28px;display:block" src="${DEFAULT_BASIC_EMOJI_URL+DEFAULT_BASIC_EMOJI_URL_MAPPING[key]}"/>`
										) + `</div>`
								}
							})
						}
					})
					this.messageList = res.data.messageList
					getApp().globalData.chat.setMessageRead({
						conversationID: this.conversationID
					}).then(function(imResponse) {
						// 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
						console.log('已读上报成功')
					}).catch(function(imError) {
						// 已读上报失败
						console.warn('setMessageRead error:', imError);
					});
				}).catch(function(imError) {
					console.warn('getConversation error:', imError);
				});
			},
			getEmoji() {
				this.emojiList = Object.keys(DEFAULT_BASIC_EMOJI_URL_MAPPING).map(key => {
					return {
						id: key,
						emoji: DEFAULT_BASIC_EMOJI_URL + DEFAULT_BASIC_EMOJI_URL_MAPPING[key],
						zh: zhEmoji[key]
					}
				})
			},
			sendEmoji(item) {
				this.msgText = this.msgText + item.zh
			},
			//预览视频
			onPreviewVideo(url) {
				uni.navigateTo({
					url: '/subpages/message/chatVideo?url=' + encodeURIComponent(url)
				})
			},
			//发送消息
			handleSendMessage() {
				this.msgText = this.msgText.trim()
				if (this.msgText.length == '') {
					return
				}
				// 1. 创建消息实例，接口返回的实例可以上屏
				let message = getApp().globalData.chat.createTextMessage({
					to: String(this.id),
					conversationType: 'C2C',
					payload: {
						text: this.msgText
					},
				});
				getApp().globalData.chat.sendMessage(message).then((res) => {
					console.log(res.data.message.payload.text)
					Object.keys(zhEmoji).map(key => {
						if (res.data.message.payload.text.includes(zhEmoji[key])) {
							res.data.message.payload.text =
								`<div style='display:flex;align-item:center;height:28px;line-height:28px'>` +
								res.data.message.payload.text.replace(zhEmoji[key],
									`<img style="width:28px;height:28px;display:block" src="${DEFAULT_BASIC_EMOJI_URL+DEFAULT_BASIC_EMOJI_URL_MAPPING[key]}"/>`
								) + `</div>`
						}
					})
					console.log(res.data.message)
					this.messageList.push(res.data.message)
					this.focus = true
					this.msgText = ""
				}).catch(err => {
					console.log(err)
				})
			},
			//录音
			handleLongPress() {
				this.isFingerTouchingScreen = true;
				recorderManager.start(this.recordConfig)
			},
			//播放录音
			play(item, index) {
				this.currentItem = item
				this.currentIndex = index
				this.audioContext = uni.createInnerAudioContext()
				this.audioContext.src = item.payload.url
				this.initAudioSrc()
				// if (!this.isCanplay) {
				// 	uni.showToast({
				// 		title: '音频未进入可以播放状态，请稍后再试',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				this.toggleAudioPlayState();
			},
			toggleAudioPlayState() {
				if (!this.isAudioPlaying) {
					this.playAudio();
				} else {
					this.stopAudio();
				}
			},
			playAudio() {
				this.audioContext.play();
				// if (props.messageItem.flow === 'in') {
				//   emits('setAudioPlayed', props.messageItem.ID);
				// }
			},
			stopAudio() {
				try {
					// The memory of the audiocontext is in memory. But The play instance may have been destroyed.
					audioContext.stop();
				} catch {
					// ignore
				}
			},
			initAudioSrc() {
				this.isAudioPlaying = false;
				this.onCanplay()
				this.audioContext.onPlay(() => {
					this.onAudioPlay()
				});
				this.audioContext.onStop(() => {
					this.onAudioStop()
				});
				this.audioContext.onEnded(() => {
					this.onAudioEnded()
				});
				this.audioContext.onError(() => {
					this.onAudioError()
				});
			},
			onAudioPlay() {
				this.isAudioPlaying = true;
				this.playingStatus(true)
			},
			onAudioStop() {
				this.isAudioPlaying = false;
				this.playingStatus(false)
			},
			onAudioEnded() {
				this.isAudioPlaying = false;
				this.playingStatus(false)
				if (this.currentItem.flow === 'in') {
					this.audioPlayedMapping[this.currentItem.ID] = true
					uni.setStorageSync('TUI_CHAT_STORAGE', this.audioPlayedMapping)
				}
			},
			playingStatus(status) {
				this.currentItem.playing = status
				this.$set(this.messageList, this.currentIndex, this.currentItem)
			},
			onCanplay() {
				this.audioContext.onCanplay(() => {
					console.log('音频进入可以播放状态事件');
					this.isCanplay = true;
				});
			},
			handleTouchStart() {
				console.log('录音开始')
				if (this.isFingerTouchingScreen) {
					// Compatibility: Ignore the recording generated by the user's first authorization on the APP.
					this.isFirstAuthrizedRecord = true;
				}
			},
			handleTouchEnd() {
				console.log('录音结束')
				this.isFingerTouchingScreen = false;
				recorderManager.stop();
			},
			startRecord() {
				if (!this.isFingerTouchingScreen) {
					this.isFirstAuthrizedRecord = true;
					recorderManager.stop();
					return;
				}
				this.recordTimer = setInterval(() => {
					this.recordTime += 1;
				}, 1000);
				this.touchBarText = '抬起发送';
				this.isRecording = true;
			},

			endRecord(res) {
				// clearInterval(this.recordTimer);
				console.log('结束录音', res)

				if (this.isFirstAuthrizedRecord) {
					// Compatibility: Ignore the recording generated by the user's first authorization on WeChat. This is not applicable to the APP.
					this.isFirstAuthrizedRecord = false;
					this.initRecorder();
					return;
				}
				if (this.isManualCancelBySlide || !this.isRecording) {
					this.initRecorder();
					return;
				}

				let _this = this
				const tempFilePath = res.tempFilePath;
				const duration = res.duration ? res.duration : _this.recordTime * 1000;
				const fileSize = res.fileSize ? res.fileSize : ((48 * _this.recordTime) / 8) * 1024;
				if (duration < 1000) {
					uni.showToast({
						title: '录音时间太短',
						icon: 'none',
						duration: 1500,
					})
				} else {
					let message = getApp().globalData.chat.createAudioMessage({
						to: String(_this.id),
						conversationType: 'C2C',
						payload: {
							file: {
								duration,
								tempFilePath,
								fileSize
							}
						},
					})
					getApp().globalData.chat.sendMessage(message).then((res) => {
						_this.messageList.push(res.data.message)
					})
				}
				this.initRecorder();
			},
			initRecorder(options) {
				this.isRecording = false;
				this.touchBarText = '按住说话';
				this.modalText = '正在录音';
				this.recordTimer = null;
				this.recordTime = 0;
				this.firstTouchPageY = -1;
				this.isManualCancelBySlide = false;

				if (!options.hasError) {
					recorderManager.stop();
				}
			},
			handleTouchMove(e) {
				if (this.isRecording) {
					const pageY = e.changedTouches[e.changedTouches.length - 1].pageY;
					if (this.firstTouchPageY < 0) {
						this.firstTouchPageY = pageY;
					}
					const offset = Number(this.firstTouchPageY) - pageY;
					if (offset > 150) {
						this.touchBarText = '抬起取消';
						this.modalText = '松开手指 取消发送';
						this.isManualCancelBySlide = true;
					} else if (offset > 50) {
						this.touchBarText = '抬起发送';
						this.modalText = '继续上滑可取消';
						this.isManualCancelBySlide = false;
					} else {
						this.touchBarText = '抬起发送';
						this.modalText = '正在录音';
						this.isManualCancelBySlide = false;
					}
				}
			},
			handleTouchEnd() {
				this.isFingerTouchingScreen = false;
				recorderManager.stop();
			},
			onInput(event) {
				console.log(event)
			},
			onBlur(event) {
				this.isExpend = false
				this.isEmoji = false
				console.log(event)
			},
			onFocus(event) {
				this.isExpend = false
				this.isEmoji = false
				console.log(event)
			},
			onMessageReceived(event) {
				this.getConversation()
			},
			confirm(e) {
				console.log(e.value[0].id)
				if (e.value[0].id == 2) {
					this.rq.getData('index/kefu').then(res => {
						uni.redirectTo({
							url: "/subpages/message/chat?id=" + res.data.data + '&type=kefu',
						})
					})
				}
				this.showPicker = false
			},
			getTimestamp(item, index) {
				if (index > 0) {
					if (item.time - this.messageList[index - 1].time >= 10 * 60) {
						return formatTime(item.time, 'YYYY-MM-DD HH:mm:ss')
					}
				} else {
					return ''
				}
			},
			// 发送拍摄或者上传视频
			sendMsgVideo() {
				uni.chooseVideo({
					success: (res) => {
						this.message = getApp().globalData.chat.createVideoMessage({
							to: String(this.id),
							conversationType: 'C2C',
							payload: {
								file: res
							},
							onProgress: (event) => {}
						});
						getApp().globalData.chat.sendMessage(this.message).then((res) => {
							this.messageList.push(res.data.message)
						})
					}
				})
			},
			// 发送拍摄或者上传图片
			sendMsgImage() {
				uni.chooseImage({
					count: 1,
					mediaType: ['image'], // 图片
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						this.message = getApp().globalData.chat.createImageMessage({
							to: String(this.id),
							conversationType: 'C2C',
							payload: {
								file: res
							},
							onProgress: function(event) {}
						});
						getApp().globalData.chat.sendMessage(this.message).then((res) => {
							this.messageList.push(res.data.message)
						})
					}
				});
			},
			// 预览图片
			onPreviewImg(image) {
				uni.previewImage({
					urls: [image],
					fail: function(err) {}
				})
			},
			onRecorderError() {
				this.initRecorder({
					hasError: true
				})
			},
			getDistance(point1, point2) {
				let R = 6371000; // 地球平均半径，单位：米
				let lat1 = point1.latitude * Math.PI / 180;
				let lat2 = point2.latitude * Math.PI / 180;
				let lon1 = point1.longitude * Math.PI / 180;
				let lon2 = point2.longitude * Math.PI / 180;
				let a = Math.sin((lat2 - lat1) / 2) * Math.sin((lat2 - lat1) / 2) +
					Math.cos(lat1) * Math.cos(lat2) * Math.sin((lon2 - lon1) / 2) * Math.sin((lon2 - lon1) / 2);
				let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				let d = R * c; // 初始计算得到的距离，单位：米

				return (d / 1000).toFixed(2)
			},
			showEmoji() {
				this.isExpend = false
				this.isEmoji = true
			},
			showExpend() {
				this.isExpend = true
				this.isEmoji = false
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: r => {
						// _this.markers.push({
						// 	id:2,
						// 	latitude:r.latitude,
						// 	longitude:r.longitude,
						// 	iconPath:'/static/start.png'
						// })
						_this.markers[1].longitude = Number(r.longitude)
						_this.markers[1].latitude = Number(r.latitude)
						_this.location.distance = _this.getDistance(_this.markers[1], _this.markers[0])
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tips-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 82rpx;
		padding: 0 28rpx;
		font-size: 28rpx;
		color: #3D3D3D;
		background: #FFFFFF;
	}

	.content {
		height: 100vh;
		overflow: hidden;
		display: flex;
		background: #f5f6fa;
		flex-direction: column;
	}

	.map-box {
		.position {
			display: flex;
			height: 88rpx;
			align-items: center;
			padding: 0 30rpx;
			font-size: 26rpx;
			color: #333333;
			background: #fff;

			.address {
				flex: 1;
				margin-right: 60rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			image {
				width: 26rpx;
				height: 30rpx;
				margin-right: 15rpx;
				flex-shrink: 0;
			}

			.distance {
				margin-left: auto;
				font-size: 26rpx;
				font-weight: bold;
				flex-shrink: 0;

			}
		}

		.map {
			width: 100%;
			height: 464rpx;
		}
	}

	.messageList {
		flex: 1;
		overflow: hidden;

		.scroll-view {
			height: 100%;
		}

		.time {
			text-align: center;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 20rpx;
		}

		.message {
			display: flex;
			// flex-direction: row;
			margin-bottom: 40rpx;
			margin: 0 20rpx 40rpx;

			.avatar {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.right_con {
				display: flex;
				flex-direction: column;

				.nick {
					font-size: 24rpx;
					color: #3D3D3D;
					margin-bottom: 10rpx;
				}

				.message-right {
					background: #fff;
					border-radius: 20rpx;
					padding: 20rpx;
					max-width: 600rpx;

					.message-content {
						white-space: pre-wrap;
						word-break: break-all;
						text-size-adjust: none;
					}
				}
			}

			.message_audio {
				display: flex;
				position: relative;

				.read {
					position: absolute;
					width: 5px;
					height: 5px;
					border-radius: 50%;
					background-color: #f00;
					margin: 5px;
					right: 0;
					top: 0;
				}

				.icon {
					width: 32rpx;
					height: 40rpx;
					margin-right: 14rpx;
					position: relative;
					overflow: hidden;

					.mask {
						position: absolute;
						z-index: 1;
						width: 105%;
						height: 105%;
						left: 0;
						top: 0;
						transform-origin: right;
						transform: scaleX(0);
						background-color: #fbfbfb;

						&.play {
							animation: audio-play 2s steps(1, end) infinite;
						}
					}

					image {
						width: 32rpx;
						height: 40rpx;
					}
				}

			}

			&.message-in {
				flex-direction: row;

				.message-right {
					background: #fff;
					border: 2rpx solid #dfdfe0;
					border-top-left-radius: 0;
					margin-right: 40rpx;
					position: relative;

					.read {
						position: absolute;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						background-color: #f00;
						margin: 5px;
						right: -30rpx;
						top: -5rpx;
					}
				}

				.message-left {
					margin-right: 20rpx;
				}

				.nick {
					text-align: left;
				}

				.message_audio {
					.icon {
						.mask {
							background-color: #fff;
						}
					}
				}
			}

			&.message-out {
				justify-content: end;
				flex-direction: row-reverse;

				.message-right {
					background: #dde9f8;
					border: 2rpx solid #d6dadd;
					border-top-right-radius: 0;
					margin-left: 40rpx;
				}

				.message-left {
					margin-left: 20rpx;
				}

				.nick {
					text-align: right;
				}

				.message_audio {
					justify-content: end;
					flex-direction: row-reverse;

					.icon {
						transform: rotate(180deg);

						.mask {
							background-color: #dde9f8;
						}
					}
				}
			}
		}
	}

	.input-box {
		height: 100rpx;
		background: #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx;


		input {
			flex: 1;
			background: #fff;
			border: none;
			height: 80rpx;
			border-radius: 10rpx;
			padding-left: 10rpx;
		}

		.record {
			flex: 1;
			background: #fff;
			border: none;
			height: 80rpx;
			font-size: 30rpx;
			color: #333;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			padding-left: 10rpx;
		}

		.emoji {
			display: flex;
			align-items: center;
			margin: 0 20rpx;
		}

		.expend {
			display: flex;
			align-items: center;
		}

		.audio {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
		}
	}

	.expend_box {
		padding: 10rpx 0 30rpx;
		display: flex;

		.expend_item {
			margin: 0 10rpx;
			width: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				margin-bottom: 20rpx;
			}
		}
	}

	.video {
		position: relative;

		.icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 40rpx;
			height: 40rpx;
		}
	}

	@keyframes audio-play {
		0% {
			transform: scaleX(0.7056);
		}

		50% {
			transform: scaleX(0.3953);
		}

		75% {
			transform: scaleX(0);
			visibility: hidden;
		}

		100% {
			transform: scaleX(0);
			visibility: hidden;
		}
	}

	.record-modal {
		height: 300rpx;
		width: 60vw;
		background-color: rgba(0, 0, 0, 0.8);
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.red-mask {
			position: absolute;
			inset: 0;
			background-color: rgba(255, 62, 72, 0.5);
			opacity: 0;
			transition: opacity 10ms linear;
			z-index: 1;
		}

		.moving-slider {
			margin: 10vw;
			width: 40rpx;
			height: 16rpx;
			border-radius: 4rpx;
			background-color: #006fff;
			animation: loading 1s ease-in-out infinite alternate;
			z-index: 2;
		}

		.float-element {
			position: relative;
			z-index: 2;
		}

		.modal-title {
			text-align: center;
			color: #fff;
		}
	}

	@keyframes loading {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(30vw, 0);
			background-color: #f5634a;
			width: 40px;
		}
	}
</style>